import React, { Component } from 'react';
// react中修正this（三种）
// 1. bind修正  将this指向组件，而不是undefined（在普通函数里面使用）
{/* <button onClick={this.handleClick.bind(this)}>按钮（普通函数bind修正）</button> */}

// 2.构造函数的构造器中修正 将this指向组件而不是undefined （在普通函数里面使用）
// constructor(props){
//   super(props)
//   this.handleClick = this.handleClick.bind(this)
// }

// 3.箭头函数修正
// 事件处理函数使用箭头函数会自动修正this



class App extends Component {
  constructor(props){
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
    handleClick(){
        console.log(this);  //没修正之前指向undefined，修正之后指向组件
        this.setState ({
          msg:'羊'
        })
    }

    handleClickA = () => {
      console.log(this)  //this指向组件App
      console.log(111);
      this.setState ({
        msg:'马'
      })
    }
    state = {
        msg:'牛'
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>按钮（构造器修正this）</button>
                <button onClick={this.handleClick}>按钮（普通函数没有修正this）</button>
                <button onClick={this.handleClick.bind(this)}>按钮（普通函数bind修正）</button>
                <button onClick={this.handleClickA}>按钮（箭头函数修正this）</button>
                <div>{this.state.msg}</div>
            </div>
        );
    }
}

export default App;
